<template>
  <div>
    <!-- 上半部吸顶 -->
  
    <van-sticky class="vansticky" >
      <searchBar type='2'/>
        <!-- 下拉框部分 -->
    <van-dropdown-menu >
      <!-- 综合 -->
      <van-dropdown-item  class="zonghe">
        <template #title>
         <span class="first">综合</span>
        </template>
         <template #default>
         <span></span>
        </template>
      </van-dropdown-item>
      <!-- 价格 -->
      <van-dropdown-item ref="item" >
        <!-- 标题 -->
        <template #title>
          
          <div class="priceBox1" @click="clearData">
            <span>价格</span>
            <div class="priceBox2">
              <van-icon name="arrow-up" />
              <van-icon name="arrow-down" />
            </div>
            
          </div>
        </template>
        <!-- 价格筛选取消和确定 -->
        <template #default>
            <!-- 价格筛选 -->
        <div class="priceContainer">
          <span class="filter">筛选</span>
          <input class="low" placeholder="最低价" type="number" :class="priceColor== 1 ? 'active' : ''" @focus="handleColor(1)"></input>
          <div class="line">—</div>
          <input class="high" placeholder="最高价"  @focus="handleColor(2)" :class="priceColor== 2 ? 'active' : ''"></input>
        </div>
        <!-- 价格排序 -->
        <div class="priceRank">
          <span>排序</span>
          <div class="low2high" :class="rankColor== 1 ? 'activeborder' : ''" @click="handleLowAHigh(1)">从低到高</div>
          <div class="high2low" :class="rankColor== 2? 'activeborder' : ''" @click="handleLowAHigh(2)">从高到低</div>
        </div>
        <!-- 取消和确定 -->
        <div class="comfirmContainer">
          <div class="cancel" ref="cancel" @click="onConfirm()" >取消</div>
          <div class="confirm" ref="confirm" @click="onConfirm()" >确定</div>
        </div>
        </template>

        
      </van-dropdown-item>
      <!-- 分类 -->
      <van-dropdown-item title="分类" >
        <template #default>
          <div class="tagContainer">
          <van-tag class="vantag" plain type="primary" size="large" color="#666">标签</van-tag>
          <van-tag class="vantag" plain type="primary" size="large" color="#666">标签</van-tag>
          <van-tag class="vantag" plain type="primary" size="large" color="#666">标签</van-tag>
          <van-tag class="vantag" plain type="primary" size="large" color="#666">标签</van-tag>
        </div>
        </template>
         
      </van-dropdown-item>
    </van-dropdown-menu>
    </van-sticky>
  
    <!-- 商品主题部分 -->
   <List/>
    
  </div>
</template>

<script>
// import { Notify } from 'vant';
import List from './List.vue'

export default {
  name: "ProductList",
  components:{
    List
  },

  data() {
    return {
      priceColor: 0, //控制筛选表单的样式
      rankColor: 0, //控制rank排序的样式
      loading: false,  //下拉加载的loading
      finished: false, //数据加载完成之后
      index:0,   //用户刷新了几次，一次来20条数据，控制不重复的20条
    };
  },
  computed: {
   
  },
  methods: {
    // 点击确定时触发的回调
    onConfirm() {
      this.$refs.item.toggle();
    },
    // 输入框获取焦点  用了 0  1   2
    handleColor(num) {
      // console.log(111)
      this.priceColor = num;
    },
    // 点击排序按钮  用了 0  1   2
    handleLowAHigh(num) {
      this.rankColor = num;
    },
    // 点击价格的时候先清空一下数据
    clearData() {
      this.priceColor = 0;
      this.rankColor = 0;
    },
    // 给搜素组件传递过去一个方法
    toSearch() {
      this.$router.push("/search");
    },
   
   
  
  },
};
</script>

<style lang="less" scoped>
// 吸顶组件背景
/deep/.van-sticky--fixed {
  background-color: #fff !important;
}

.tagContainer {
  padding: 0 35px;
  .vantag {
    margin: 10px;
  }
}

// 价格筛选位置
.priceContainer {
  display: flex;
  font-size: 14px;
  line-height: 30px;
  height: 30px;
  padding: 10px 20px;
  .low,
  .high {
    box-sizing: border-box;
    // padding: 0 40px;
    border: 1px solid #bbb;
    border-radius: 3px;
    color: #000;
    width: 125px;
    text-align: center;

    &::-webkit-input-placeholder {
      text-align: center;
      color: #bbb;
    }
  }
  .filter {
    margin-right: 10px;
  }
  .line {
    margin: 0 10px;
    color: #bbb;
  }
}

// 价格排序
.priceRank {
  display: flex;
  padding: 10px 20px;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  span {
    margin-right: 10px;
  }
  .high2low,
  .low2high {
    padding: 5px 30px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #bbb;
    line-height: 20px;
    margin-right: 20px;
  }
}

// <!-- 取消和确定 -->
.comfirmContainer {
  display: flex;
  height: 60px;
  line-height: 60px;
  border-top: 1px solid #bbb;
  font-size: 16px;
  .confirm,
  .cancel {
    flex: 1;
    text-align: center;
  }
  .cancel {
    border-right: 1px solid #ccc;
  }
  .confirm {
    color: #fb2639;
  }
}

// 隐藏综合下面的遮罩层
.zonghe {
  /deep/.van-overlay {
    background-color: transparent;
  }
}
/deep/.van-dropdown-menu__title--down::after {
  display: none;
}
/deep/.van-dropdown-menu__title::after {
  display: none;
}

// 价格位置调整盒子布局
.priceBox1 {
  display: flex;
  position: relative;
  width: 50px;
}
// 设置两个小箭头的位置和大小
.priceBox2 {
  display: flex;
  position: absolute;
  top: 3px;
  left: 30px;
  flex-direction: column;
  font-size: 10px;
  transform: scale(0.73333);
  transform-origin: 0 0;
  margin-left: 5px;
}



// 单独边框颜色
.active {
  border: 1px solid #fb2639 !important;
}
// 文字和边框颜色
.activeborder {
  color: #fb2639 !important;
  border: 1px solid #fb2639 !important;
}
</style>